<template>
  <div>
    <a @click="dialog = true" class="avatar-container">
      <div class="avatar-wrapper">
        <img :src="user.avatar" style="border-radius: 50%; width: 120px; height: 120px; position: relative; left: 100px;margin-bottom: 15px;margin-top: 10px">
      </div>
    </a>
    <el-dialog :visible.sync="dialog" title="上传" width="80%" style="text-align: center">
      <el-upload
          :auto-upload="false"
          :limit="limitCount"
          :on-remove="handleRemove"
          :on-change="onChange"
          :on-success="handleSuccess"
          :file-list="fileList"
          :before-upload="beforeAvatarUpload"
          action="#"
          name='file'
          class="avatar-uploader"
          list-type="picture-card"
          accept="image/jpg,image/jpeg,image/png">
        <img v-if="url" :src="url" class="el-upload-list__item-thumbnail"></img>
        <i v-else slot="default" class="el-icon-plus" />
        <div class="el-upload__tip" slot="tip">加入图片自动上传,"png", "jpg", "jpeg"格式,大小5M以内</div>
      </el-upload>
      <div slot="footer" class="dialog-footer" style="position: relative">
        <el-button @click="dialog = false" style="position: absolute; left: 150px;top: -35px">取 消</el-button>
      </div>
    </el-dialog>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户昵称">
        <el-input v-model="form.nickname" :placeholder="user.nickname"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input v-model="form.described" placeholder="留下你的足迹吧!"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="update" style="position: relative; left: 50px">提 交</el-button>
        <el-button @click="cancel" style="position: relative; left: 130px">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import '@/api/request';
export default {
  data() {
    return {
      user: '',
      nickname: '',
      form: {
        id: '',
        avatar: '',
        nickname: '',
        sex: '',
        birthday: '',
        described: '',
      },
      dialog: false,
      fileList:[],
      limitCount: 1,
      onChangeImgUrl: '',
      countDown: 1,
        avatar: '',
    };
  },
  created() {
    this.user = localStorage.user?JSON.parse(localStorage.user):null;
    this.nickName = this.user.nickname;
    this.avatar=this.user.avatar;

  },
  methods: {
    handleRemove(file, fileList) {
      this.onChangeImgUrl = ''
    },
    handleSuccess(res, file) {
      this.onChangeImgUrl=res.data
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    onChange(file) {
      console.log(file)
      let formData = new FormData();
      formData.append("file", file.raw);
      axios.post('http://localhost:8088/qiniu/uploadImg',formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }).then((res) =>{
        if (res.data.code===1){
          this.$message.success('头像上传成功!')
          this.onChangeImgUrl = res.data.data
          this.form.avatar=this.onChangeImgUrl
          this.dialog = false;
        }else {
          this.$message.error(res.data.msg)
        }
      });
    },
    timeDown() {
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timer);
          window.close();
        }
      }, 1000);
    },
    update(){
      this.form.id = this.user.id;
      this.form.birthday = this.getLocalTimes(this.form.birthday);
      let message = {...this.form};
        if (!(isNaN(message.avatar) || message.avatar == null)) {
            message.avatar = this.avatar
        }
      if (!(isNaN(message.nickname) || message.nickname == null)){
        console.log("删除空名字:" + message.nickname.toString())
        delete message.nickname
      }else {
        console.log("名字:" + message.nickname.toString())
      }
      if (!(isNaN(message.sex) || message.sex == null)){
        console.log("删除空性别:" + message.sex.toString())
        delete message.sex;
      }else {
        console.log("性别:" + message.sex.toString())
      }
      if (message.birthday.includes("NaN-NaN-NaN")){
        console.log("删除空生日:" + message.birthday.toString())
        delete message.birthday;
      }else {
        console.log("生日:" + message.birthday.toString())
      }
      if (!(isNaN(message.described) || message.described == null)){
        console.log("删除空简介:" + message.described.toString())
        delete message.described;
      }else {
        console.log("简介:" + message.described.toString())
      }
      console.log("这是结果--------------" + message)
      let url = 'http://localhost:8088/user/update';
      axios.put(url,message).then((response) =>{
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.$message.success(jsonResult.data);
          this.timeDown();
        } else {
          this.$message(response.data.msg)
        }
      })
    },
    //日期格式转换
    getLocalTimes(ns){
      let date = new Date(ns);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? '0'+month : month ;
      day = day < 10 ? '0'+day : day ;
      date = year + '-' + month + '-' + day + ' ' + '00:00:00';
      return date;
    },
    cancel() {
      window.close();
    }
  }
}
</script>

<style>
.avatar-container {
  position: relative;
  top: 0%; /* 相对于容器顶部的偏移量为 50% */
  left: 18%; /* 相对于容器左侧的偏移量为 50% */
  //transform: translate(-50%, -50%); /* 使用 transform 属性进行微调 */
  /* 可以设置内容区域的宽度、高度、背景色等样式 */

}
</style>